<template>
    <v-container fluid class="fill-height" style="text-align: center;">
        <Feedback :isSuccess="isSuccess" :isError="isError" :text="text"></Feedback>
        <v-row>
            <v-col cols="12" xs="12" sm="6" md="5" lg="6" class="ma-auto">
                <v-card outline>
                    <v-stepper v-model="step">
                        <v-stepper-header>
                            <v-stepper-step :complete="step > 1" step="1">
                                输入邮箱
                            </v-stepper-step>
                            <v-divider></v-divider>
                            <v-stepper-step :complete="step > 2" step="2">
                                验证邮箱
                            </v-stepper-step>
                            <v-divider></v-divider>
                            <v-stepper-step :complete="step > 3" step="3">
                                重置密码
                            </v-stepper-step>
                            <v-divider></v-divider>
                            <v-stepper-step step="4">
                                重置成功
                            </v-stepper-step>
                        </v-stepper-header>
                        <v-stepper-items>
                            <v-stepper-content step="1">
                                <ValidationProvider v-slot="{ errors }" name="邮箱" rules="required|email">
                                    <v-text-field v-model="email" :error-messages="errors" label="邮箱"
                                        outlined></v-text-field>
                                </ValidationProvider> <v-btn text @click="el = 1">
                                    返回上一步
                                </v-btn>
                                <v-btn color="primary" @click="firstStep()">
                                    下一步
                                </v-btn>
                            </v-stepper-content>
                            <v-stepper-content step="2">
                                <ValidationProvider v-slot="{ errors }" name="验证码" rules="required">
                                    <v-text-field v-model="code" :error-messages="errors" label="验证码"
                                        outlined></v-text-field>
                                </ValidationProvider>
                                <v-btn text @click="el = 2">
                                    返回上一步
                                </v-btn>
                                <v-btn color="primary" @click="secondStep()">
                                    下一步
                                </v-btn>
                            </v-stepper-content>
                            <v-stepper-content step="3">
                                <ValidationProvider v-slot="{ errors }" name="新密码" rules="required|min:6">
                                    <v-text-field v-model="newPassword" :error-messages="errors" label="新密码"
                                        outlined></v-text-field>
                                </ValidationProvider><v-btn text @click="step = 2">
                                    返回上一步
                                </v-btn>
                                <v-btn color="primary" @click="finallyStep()">
                                    下一步
                                </v-btn>
                            </v-stepper-content>
                            <v-stepper-content step="4">
                                <v-alert type="success">密码重置成功，请返回登录页面进行登录</v-alert>
                                <v-btn color="primary" @click="goSign">
                                    去登录
                                </v-btn>
                            </v-stepper-content>
                        </v-stepper-items>
                    </v-stepper>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import { findPwd } from '../services/UserRequest';
import Feedback from '../components/Feedback.vue'
export default {
    data: () => ({
        step: 1,
        email: '',
        code: '',
        newPassword: '',
        isSuccess: false,
        isError: false,
        text: '',
    }),
    components: {
        Feedback
    },
    watch: {
        isError() {
            if (this.isError) {
                setTimeout(() => {
                    this.isError = false
                }, 3000)
            }
        },
        isSuccess() {
            if (this.isSuccess) {
                setTimeout(() => {
                    this.isSuccess = false
                }, 3000)
            }
        }
    },
    methods: {
        goSign(){
            this.$router.push({path:"/signin"})
        },
        isEmail(email) {
            var regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            return regex.test(email);
        },  
        firstStep() {
            if (!this.isEmail(this.email)) {
                this.text = '邮箱格式错误'
                this.isError = true
                return
            }
            findPwd({ step: 1, email: this.email })
                .then(res => {
                    this.text = res.data.message
                    if (res.data.code == 200) {
                        this.isSuccess = true
                        this.step = 2
                    } else {
                        this.isError = true
                    }
                })
        },
        secondStep() {
            findPwd({ step: 2, email: this.email, verifyCode: this.code })
                .then(res => {
                    this.text = res.data.message
                    if (res.data.code == 200) {
                        this.isSuccess = true
                        this.step = 3
                    } else {
                        this.isError = true
                    }
                })
        },
        finallyStep() {
            findPwd({ step: 3, email: this.email, password: this.newPassword })
                .then(res => {
                    this.text = res.data.message
                    if (res.data.code == 200) {
                        this.isSuccess = true
                        this.step = 4
                    } else {
                        this.isError = true
                    }
                })
        }
    }
}
</script>